<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<body>
<div id="app">
    <p>
        <button @click="count++">
            Count is: {{ count }}
        </button>
    </p>

    <p>
        <span>Message: {{ msg }}</span>
        <br/>
        <input type="text" v-model="msg"/>
    </p>

    <p>Using text interpolation: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>

    <p>
        <input :id="dynamicId" v-model="dynamicId"/>
    </p>

    <p>
        布尔类型，要想不生效该属性，必须是false、null、0、undefined，而不能有引号，比如"false"
        <br/>
        <button :disabled="isButtonDisabled">
            isButtonDisabled: {{ isButtonDisabled }}
        </button>

    <div>改变: {{ isButtonDisabled }}</div>

    <input type="radio" id="one" :value=theTrue v-model="isButtonDisabled"/>
    <label for="one">True</label>

    <input type="radio" id="two" :value=!theTrue v-model="isButtonDisabled"/>
    <label for="two">False</label>
    </p>
</div>

<script>
    const {createApp, ref} = Vue
    const msg = ref("Hello Vue")
    const rawHtml = ref('<span style="color: red">This should be red.</span>')
    const dynamicId = ref("id")
    const isButtonDisabled = ref(true)
    const theTrue = ref(true)

    var vm = createApp({
        setup() {
            return {
                count: ref(0),
                msg: msg,
                rawHtml,
                dynamicId,
                isButtonDisabled,
                theTrue
            }
        }
    }).mount('#app')
</script>
</body>
</html>